<template>
  <!-- 打印标签 -->
  <a-modal v-model:visible="showPrintLabel" title="打印标签" class="print-dialog" width="1200px" title-align="start" @cancel="closedDialog">
    <div class="fba-print-label-wrap">
      <div class="print-w">
        <div class="print-setting">
          <ChoosePrintList ref="choosePrintRef" @getLodop="getLodop" />
          <a-row style="margin-bottom: 40px">
            <a-col :span="6">
              <p class="title">
                <span>纸张宽度</span>
                <a-popover content="最大支持100mm * 100mm">
                  <icon-question-circle />
                </a-popover>
              </p>
              <a-input-group>
                <div class="input-group">
                  <a-input-number v-model="pageSizeWidth" style="width: 70px" placeholder="" :min="0" :max="100" />
                  <div class="unit">mm</div>
                </div>
              </a-input-group>
            </a-col>
            <a-col :span="8">
              <p class="title">
                <span>介质大小</span>
                <a-popover content="最大支持100mm * 100mm">
                  <icon-question-circle />
                </a-popover>
              </p>
              <a-input-group>
                <div class="input-group">
                  <a-input-number v-model="mediumWidth" style="width: 70px" placeholder="" :min="0" :max="100" />
                  <span class="label">宽</span>
                </div>
                <div class="input-group">
                  <a-input-number v-model="mediumHeight" style="width: 70px" placeholder="" :min="0" :max="100" />
                  <div class="unit">mm</div>
                  <span class="label">高</span>
                </div>
              </a-input-group>
            </a-col>
            <a-col :span="9">
              <p class="title">字体：</p>
              <div class="flex-c">
                <div class="input-group">
                  <a-input-number :disabled="disabledFontSize" v-model="fontSize" style="width: 90px; margin-right: 10px" placeholder="" :min="10" :max="16" />
                  <span class="label">大小</span>
                </div>
                <div class="input-group">
                  <a-input-number :disabled="disabledFontSize" v-model="fontIndex" style="width: 90px" placeholder="" :min="0" :max="100" />
                  <span class="label">字间距</span>
                </div>
              </div>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 40px">
            <a-col :span="12">
              <p class="title">
                <span>条码大小</span>
                <a-popover content="条码大小由编码生成，请确保条码大小介于介质大小之间">
                  <icon-question-circle />
                </a-popover>
              </p>
              <a-input-group style="margin-right: 10px">
                <div class="input-group">
                  <a-input-number v-model="codeWidth" style="width: 70px" placeholder="" :min="0" :max="100" />
                  <div class="unit">mm</div>
                  <span class="label">宽</span>
                </div>
              </a-input-group>
              <a-input-group>
                <div class="input-group">
                  <a-input-number v-model="codeHeight" style="width: 70px" placeholder="" :min="0" :max="100" />
                  <div class="unit">mm</div>
                  <span class="label">高</span>
                </div>
              </a-input-group>
            </a-col>

            <a-col :span="12">
              <p class="title">
                <span>边距</span>
                <a-popover>
                  <template #content>
                    <p style="width: 400px">亚马逊标签要求周围保留足够的空白,左右保留0.25英寸(约6.4mm),上下保留0.125英寸(约3.2mm)</p>
                  </template>
                  <icon-question-circle />
                </a-popover>
              </p>
              <a-input-group>
                <div class="input-group">
                  <a-input-number v-model="paddingTop" style="width: 60px" placeholder="" :min="0" :max="100" />
                  <span class="label">上</span>
                </div>
                <div class="input-group">
                  <a-input-number v-model="paddingBottom" style="width: 60px" placeholder="" :min="0" :max="100" />
                  <span class="label">下</span>
                </div>
                <div class="input-group">
                  <a-input-number v-model="paddingLeft" style="width: 60px" placeholder="" :min="0" :max="100" />
                  <span class="label">左</span>
                </div>
                <div class="input-group">
                  <a-input-number v-model="paddingRight" style="width: 60px" placeholder="" :min="0" :max="100" />
                  <span class="label">右</span>
                </div>
                <div class="unit">mm</div>
              </a-input-group>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 20px">
            <a-col :span="10">
              <p class="title">打印列表：</p>
              <a-radio-group v-model="columnsNum">
                <a-radio :value="1">单排</a-radio>
                <a-radio :value="2">双排</a-radio>
              </a-radio-group>
            </a-col>
            <a-col :span="14">
              <p class="title">
                <span>不同产品标签自动区隔</span>
                <a-popover>
                  <template #content>
                    <p style="width: 400px">若选择“是”，则打印时会在不同FNSKU/SKU标签前自动插入一个空白标签加以区隔，适合用于单个产品标签打印数量较多时。 若选择“否”，则只会逐个打印，不会自动插入空白标签。</p>
                  </template>
                  <icon-question-circle />
                </a-popover>
              </p>
              <a-radio-group v-model="isAuto">
                <a-radio :value="true">是</a-radio>
                <a-radio :value="false">否</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <div class="print-con" style="margin-bottom: 20px">
            <p class="title">打印内容设置：</p>
            <a-checkbox-group v-model="fieldList">
              <a-checkbox style="width: 150px" v-for="(item, i) in Object.values(allFieldList)" :key="i" :value="item.key">{{ item.name }}</a-checkbox>
            </a-checkbox-group>
          </div>
        </div>
        <div class="barcode-win">
          <div class="print-media-wapper">
            <div class="print-media" :style="`width: ${mediumWidth}mm; height: ${mediumHeight}mm;padding:${paddingTop}mm ${paddingRight}mm ${paddingBottom}mm ${paddingLeft}mm`">
              <div class="print-media-padding">
                <div
                  class="print-item"
                  @mousedown="moveItem($event, 0, 0, 'code')"
                  :class="{ active: currentIndex === 0 }"
                  :style="`
                  width: ${codeWidth}mm; 
                  height: ${codeHeight}mm;
                  left:${elementPosition['code'] ? elementPosition['code'].left : 0}px;
                  top:${elementPosition['code'] ? elementPosition['code'].top : 0}px`"
                >
                  <img id="imgcode" :src="brcode" />
                </div>
                <div
                  class="print-item"
                  @mousedown="moveItem($event, 0, i + 1, key)"
                  @click="currentIndex = i + 1"
                  :class="{ active: currentIndex === i + 1 }"
                  v-for="(key, i) in fieldList"
                  :key="i"
                  :style="`
                  font-size:${fontSize}pt;
                  left:${elementPosition[key] ? elementPosition[key].left : 0}px;
                  top:${elementPosition[key] ? elementPosition[key].top : 0}px`"
                >
                  {{ allFieldList[key].defaultVal }}
                </div>
              </div>
            </div>
            <div class="print-media" v-if="columnsNum == 2" :style="`width: ${mediumWidth}mm; height: ${mediumHeight}mm;padding:${paddingTop}mm ${paddingRight}mm ${paddingBottom}mm ${paddingLeft}mm;border-left:1px solid #eee`">
              <div class="print-media-padding">
                <div
                  class="print-item"
                  @mousedown="moveItem($event, 0, 0, 'code')"
                  :class="{ active: currentIndex === 0 }"
                  :style="`
                  width: ${codeWidth}mm; 
                  height: ${codeHeight}mm;
                  left:${elementPosition['code'] ? elementPosition['code'].left : 0}px;
                  top:${elementPosition['code'] ? elementPosition['code'].top : 0}px`"
                >
                  <img id="imgcode" :src="brcode" />
                </div>
                <div
                  class="print-item"
                  @mousedown="moveItem($event, 0, i + 1, key)"
                  @click="currentIndex = i + 1"
                  :class="{ active: currentIndex === i + 1 }"
                  v-for="(key, i) in fieldList"
                  :key="i"
                  :style="`
                  font-size:${fontSize}pt;
                  left:${elementPosition[key] ? elementPosition[key].left : 0}px;
                  top:${elementPosition[key] ? elementPosition[key].top : 0}px`"
                >
                  {{ allFieldList[key].defaultVal }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="handle-w">
        <a-space>
          <a-button class="gray-outline" size="medium" @click="removeAll">全部移除</a-button>
          <p>
            <span>已选 </span>
            <span class="highlight"> {{ selectIds.length }} </span>
          </p>
        </a-space>
      </div>
      <a-table style="margin-top: 10px" class="table-tow-line" ref="tableRef" row-key="id" :loading="tableLoading" @selection-change="selectColumn" :row-selection="rowSelection" :data="tableList" size="mini" :bordered="false" :pagination="false">
        <template #columns>
          <a-table-column :data-index="item.dataIndex" :title="item.title" :width="item.width" v-for="(item, i) in tableColumns" :key="i">
            <template v-if="item.dataIndex == 'img'" #cell="{ record }">
              <ImgPopover :src="record.img">
                <template #con>
                  <a-image width="40" height="40" fit="contain" :src="record.img" />
                </template>
              </ImgPopover>
            </template>
            <template v-else-if="item.isLimit" #cell="{ record }">
              <TextLimit :rows="1">{{ record[item.dataIndex] || '--' }}</TextLimit>
            </template>
            <template v-else-if="item.dataIndex == 'productNamePrint'" #cell="{ record }">
              <a-textarea v-model="record.productNamePrint" />
            </template>
            <template v-else-if="item.dataIndex == 'printNum'" #cell="{ record, rowIndex }">
              <a-input-number v-model="record.printNum" style="width: 90px" placeholder="" :min="1" :max="record.unboxedNum" />
              <icon-double-down v-if="rowIndex === 0" class="edit-icon" @click="setGlobal(record, 'printNum')" />
            </template>
          </a-table-column>
          <a-table-column title="操作" :width="60">
            <template #cell="{ record, rowIndex }">
              <a-button type="text" @click="removeSingle(record, rowIndex)">移除</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <template #footer>
      <a-button size="small" @click="closedDialog">取消</a-button>
      <a-button size="small" type="primary" :disabled="!tableList.length" @click="toPrint">打印</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, PropType, reactive, computed } from 'vue'
  import brcode from '@/assets/brcode.png'
  import ChoosePrintList from '@/components/Print/choosePrintList.vue'
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    defaultFixed: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    list: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    printConfig: {
      type: Object,
      default: () => {},
    },
    disabledFontSize: {
      //禁用自定义字体大小，为true的时候字段配置一定需要传fontSize
      type: Boolean,
      default: false,
    },
  })
  const emit = defineEmits(['closed'])
  const showPrintLabel = ref(props.isShow)
  const tableList = ref<Array<any>>([])
  const tableLoading = ref(false)
  const tableListMap = ref({})
  const selectRows = ref<any>([])
  const selectIds = ref([])
  const tableRef = ref()
  const mediumWidth = ref(50)
  const mediumHeight = ref(25)
  const codeHeight = ref(10)
  const codeWidth = ref(40)
  const fontSize = ref(10)
  const fontIndex = ref(0)
  const paddingTop = ref(2)
  const paddingBottom = ref(2)
  const paddingLeft = ref(2)
  const paddingRight = ref(2)
  const columnsNum = ref(1)
  const isAuto = ref(false)
  const currentIndex = ref()
  const fieldList = ref<Array<string>>([])
  const elementPosition = ref<any>({})
  const choosePrintRef = ref()
  const tableColumns = ref<Array<any>>([])
  const pageSizeWidth = ref(50)
  let LODOP: any = {}
  let isMoving = true
  // 除去边距纸张区域，可用于设置文字大小
  const currentWidth = computed(() => Number(mediumWidth.value || 0) - Number(paddingLeft.value || 0) - Number(paddingRight.value || 0))

  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  }) as any

  const allFieldList = ref<any>({
    fnsku: { name: 'FNSKU', key: 'fnsku', defaultVal: 'X003R61BTJ' },
    msku: { name: 'MSKU', key: 'msku', defaultVal: 'WMX10842-HKP' },
    productName: { name: '产品名称', key: 'productName', defaultVal: 'Horse Gifts for Women' },
    productNamePrint: { name: '产品名称(打印)', key: 'productNamePrint', defaultVal: 'Horse Gifts for Women' },
    sku: { name: 'SKU', key: 'sku', defaultVal: 'WME20815KP' },
  })

  // 获取打印列表数据
  async function setDataList() {
    tableList.value = []
    tableListMap.value = {}
    props.list.forEach((item: any) => {
      let obj = {
        ...item,
        printNum: 1,
        productNamePrint: item.productName,
        id: item.id || item.msku + item.fnsku,
      }
      tableList.value.push(obj)
      tableListMap.value[obj.id] = obj
    })
  }
  // 获取打印默认配置信息
  function setConfigInfo() {
    // 表格字段
    tableColumns.value = props.printConfig?.tableColumns || []
    // 打印字段
    allFieldList.value = props.printConfig?.allFieldList || allFieldList.value
    // 默认选中打印字段
    fieldList.value = props.printConfig?.fieldList || []
  }
  // 设置各元素初始位置
  function setElementPosition() {
    elementPosition.value = {
      code: { left: 0, top: 0 },
    }
    // 条形码高度+1mm
    let height = codeHeight.value + 0.5
    Object.keys(allFieldList.value).forEach((key: string) => {
      let _index = fieldList.value.findIndex((fixedStr: string) => fixedStr === key)
      // 给默认选中的字段设置初始位置
      if (_index === -1) {
        elementPosition.value[key] = { left: 0, top: 0 }
      } else {
        elementPosition.value[key] = { left: 0, top: height * 3.7795 }
        // 累加文字本身的高度
        let _fontSize = props.disabledFontSize ? allFieldList.value[key].fontSize : fontSize.value
        height += (_fontSize || 0) * 0.35277 + 0.5
      }
    })
  }
  setConfigInfo()
  setDataList()
  setElementPosition()

  function selectColumn(val: any) {
    selectIds.value = val
  }

  // 移动位置
  function moveItem(e: any, parentIndex: number, index: number, key: string) {
    currentIndex.value = index
    isMoving = true
    let barcodeWrap: any = document.querySelector('.barcode-win')
    let arcoModal: any = document.querySelector('.print-dialog .arco-modal')

    let currentParentNode: any = document.querySelectorAll('.print-media-padding')[parentIndex]
    let elDom: any = currentParentNode.querySelectorAll('.print-item')[index]

    var pageW = document.documentElement.clientWidth
    let pageH = document.documentElement.clientHeight
    var itemW = elDom.offsetWidth
    var itemH = elDom.offsetHeight

    var distanceX = arcoModal.offsetLeft + currentParentNode.offsetLeft + barcodeWrap.offsetLeft + e.offsetX
    var distanceY = arcoModal.offsetTop + 48 + currentParentNode.offsetTop + barcodeWrap.offsetTop + e.offsetY

    document.onmousemove = function (e) {
      var e = e || window.event
      // 移动的位置，鼠标的位置减去鼠标与元素左边和顶部的相对位置。
      var moveX = e.pageX - distanceX
      var moveY = e.pageY - distanceY

      //判断移动的位置是否超出页面，是的话就不能移动。
      // 移动的最大位置
      var maxX = pageW - itemW
      var maxY = pageH - itemH

      moveX = Math.min(maxX, Math.max(0, moveX))
      moveY = Math.min(maxY, Math.max(0, moveY))
      // 判断是否可移动
      if (isMoving === true) {
        elementPosition.value[key].top = moveY
        elementPosition.value[key].left = moveX
      }
      document.onmouseup = function () {
        isMoving = false
      }
    }
  }
  function getLodop(val: any) {
    LODOP = val
  }

  function getSelectRows() {
    selectRows.value = []
    selectIds.value.map((id) => {
      selectRows.value.push(tableListMap.value[id])
    })
  }
  //设置全局
  async function setGlobal(item: any, key: string) {
    tableList.value.forEach((el: any) => {
      el[key] = item[key]
    })
  }

  // 全部移除
  function removeAll() {
    tableList.value = []
    tableRef.value.selectAll(false)
  }
  // 单个移除
  function removeSingle(row: any, index: number) {
    tableList.value.splice(index, 1)
    let _index: number = selectIds.value.findIndex((id: string) => id === row.id)
    if (_index > -1) {
      selectIds.value.splice(_index, 1)
    }
  }
  // 设置打印的字符
  function getPrintVal(el: any, key: string) {
    let val = el[key]
    if (!val || !allFieldList.value[key]?.lengthLimit) return val || ''
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    ctx.font = `${fontSize.value}pt Microsoft YaHei`
    const textWidth = ctx.measureText(val.toUpperCase()).width
    const size = currentWidth.value * 3.779
    const lengthLimit = parseInt(size / (textWidth / val.length)) || 20
    // 限制字符长度
    if (val.length <= lengthLimit) return val || ''
    const headVal = val.split(' ')?.[0]
    const footerVal = val.slice((lengthLimit - headVal.length) * -1)
    return headVal + '...' + footerVal
  }

  // 设置html打印内容
  function toPrint() {
    let { type, bridgeIDandName, printerIndex } = choosePrintRef.value.getBridgeInfo()
    let pageSize = (pageSizeWidth.value || mediumWidth.value) + 'mm'
    LODOP.PRINT_INITA(paddingTop.value + 'mm', paddingLeft.value + 'mm', pageSize, mediumHeight.value + 'mm', '打印标签')
    // 纸张大小
    LODOP.SET_PRINT_PAGESIZE(1, pageSize, mediumHeight.value + 'mm', 'CreateCustomPage')
    //  指定打印机设备
    if (type === 1) {
      LODOP.SET_BRIDGE_INDEX(bridgeIDandName + ',' + printerIndex)
    } else {
      LODOP.SET_PRINTER_INDEX(printerIndex)
    }
    // 打印内容
    createPage()
    // 打印预览
    LODOP.PREVIEW()
  }

  function createPage() {
    LODOP.SET_PRINT_STYLE('FontName', 'Microsoft YaHei')
    LODOP.SET_PRINT_STYLEA('All', 'LetterSpacing', (fontIndex.value || 0) + 'pt')
    getSelectRows()

    if (columnsNum.value === 1) {
      // 单排打印
      sinleColumnData()
    } else if (isAuto.value) {
      // 双排打印需要自动区隔
      twoColumnDataAndAuto()
    } else {
      // 双排打印
      twoColumnData()
    }
  }
  // 单排打印
  function sinleColumnData() {
    tableList.value.forEach((el: any) => {
      if (isAuto.value) {
        // 间隔标签
        LODOP.NEWPAGE()
        LODOP.SET_PRINT_STYLE('Alignment', 2)
        LODOP.SET_PRINT_STYLE('FontSize', 12)
        let conWidth = mediumWidth.value - paddingLeft.value - paddingRight.value
        LODOP.ADD_PRINT_TEXT('5mm', 0, conWidth + 'mm', 16, el.fnsku)
        LODOP.ADD_PRINT_TEXT('12mm', 0, conWidth + 'mm', 16, `(${el.printNum})`)
      }
      LODOP.SET_PRINT_STYLE('Alignment', 1)
      for (let i = 0; i < el.printNum; i++) {
        LODOP.NEWPAGE()
        LODOP.ADD_PRINT_BARCODE(getTop('code'), getLeft('code'), codeWidth.value + 'mm', codeHeight.value + 'mm', '128B', el.fnsku)
        LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
        fieldList.value.forEach((key: string) => {
          let _fontSize = props.disabledFontSize ? allFieldList.value[key].fontSize : fontSize.value
          LODOP.SET_PRINT_STYLE('FontSize', _fontSize)
          LODOP.ADD_PRINT_TEXT(getTop(key), getLeft(key), mediumWidth.value + 'mm', _fontSize + 'pt', getPrintVal(el, key) || '')
        })
      }
    })
  }
  // 双排打印自动区隔
  function twoColumnDataAndAuto() {
    tableList.value.forEach((el: any) => {
      // 间隔标签
      LODOP.NEWPAGE()
      LODOP.SET_PRINT_STYLE('Alignment', 2)
      LODOP.SET_PRINT_STYLE('FontSize', 12)
      let conWidth = mediumWidth.value - paddingLeft.value - paddingRight.value
      LODOP.ADD_PRINT_TEXT('5mm', 0, conWidth + 'mm', 16, el.fnsku)
      LODOP.ADD_PRINT_TEXT('12mm', 0, conWidth + 'mm', 16, `(${el.printNum})`)

      LODOP.SET_PRINT_STYLE('Alignment', 1)
      for (let i = 0; i < el.printNum; i++) {
        if ((i + 1) % 2 != 0) {
          // 偶数列
          LODOP.ADD_PRINT_BARCODE(getTop('code'), getLeft('code') + '53mm', codeWidth.value + 'mm', codeHeight.value + 'mm', '128B', el.fnsku)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          fieldList.value.forEach((key: string) => {
            let _fontSize = props.disabledFontSize ? allFieldList.value[key].fontSize : fontSize.value
            LODOP.SET_PRINT_STYLE('FontSize', _fontSize)
            LODOP.ADD_PRINT_TEXT(getTop(key), getLeft(key) + 3.7795 * 53, mediumWidth.value + 'mm', _fontSize + 'pt', getPrintVal(el, key) || '')
          })
        } else {
          // 单数列
          LODOP.NEWPAGE()
          LODOP.ADD_PRINT_BARCODE(getTop('code'), getLeft('code'), codeWidth.value + 'mm', codeHeight.value + 'mm', '128B', el.fnsku)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          fieldList.value.forEach((key: string) => {
            let _fontSize = props.disabledFontSize ? allFieldList.value[key].fontSize : fontSize.value
            LODOP.SET_PRINT_STYLE('FontSize', _fontSize)
            LODOP.ADD_PRINT_TEXT(getTop(key), getLeft(key), mediumWidth.value + 'mm', _fontSize + 'pt', getPrintVal(el, key) || '')
          })
        }
      }
    })
  }

  // 双排打印不需要隔断
  function twoColumnData() {
    LODOP.SET_PRINT_STYLE('Alignment', 1)
    let list: Array<any> = []
    tableList.value.forEach((el: any) => {
      for (let i = 0; i < el.printNum; i++) {
        list.push(el)
      }
    })
    list.forEach((el: any, i: number) => {
      if (i % 2 == 0) {
        // 单数列
        LODOP.NEWPAGE()
        LODOP.ADD_PRINT_BARCODE(getTop('code'), getLeft('code'), codeWidth.value + 'mm', codeHeight.value + 'mm', '128B', el.fnsku)
        LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
        fieldList.value.forEach((key: string) => {
          let _fontSize = props.disabledFontSize ? allFieldList.value[key].fontSize : fontSize.value
          LODOP.SET_PRINT_STYLE('FontSize', _fontSize)
          LODOP.ADD_PRINT_TEXT(getTop(key), getLeft(key), mediumWidth.value + 'mm', _fontSize + 'pt', getPrintVal(el, key) || '')
        })
      } else {
        // 偶数列
        LODOP.ADD_PRINT_BARCODE(getTop('code'), getLeft('code') + '53mm', codeWidth.value + 'mm', codeHeight.value + 'mm', '128B', el.fnsku)
        LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
        fieldList.value.forEach((key: string) => {
          let _fontSize = props.disabledFontSize ? allFieldList.value[key].fontSize : fontSize.value
          LODOP.SET_PRINT_STYLE('FontSize', _fontSize)
          LODOP.ADD_PRINT_TEXT(getTop(key), getLeft(key) + 3.7795 * 53, mediumWidth.value + 'mm', _fontSize + 'pt', getPrintVal(el, key) || '')
        })
      }
    })
  }
  function getLeft(key: string) {
    return elementPosition.value[key]?.left || 0
  }
  function getTop(key: string) {
    return elementPosition.value[key]?.top || 0
  }
  // 关闭弹窗
  function closedDialog() {
    showPrintLabel.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .fba-print-label-wrap {
    height: calc(84vh - 160px);
    background-color: #fff;
  }
  .print-w {
    display: flex;
    .arco-input-group {
      border: 1px solid #dadde2;
      border-radius: 3px;
      .arco-input-wrapper {
        border: none;
        border-right: 1px solid #dadde2;
      }
    }
    .unit {
      background-color: #f1f1f1;
      width: 42px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
      color: #666;
    }
    .input-group {
      position: relative;
      display: flex;
      align-items: center;
      .label {
        font-size: 12px;
        color: #999;
        position: absolute;
        left: 20px;
        top: 35px;
        transform: scale(0.9);
      }
    }
    .title {
      margin-bottom: 5px;
      color: #888;
    }
    .print-setting {
      width: 600px;
      flex-shrink: 0;
    }
    .printer-w {
      margin-bottom: 10px;
    }
  }
  :deep(.arco-textarea) {
    font-size: 12px !important;
    height: 25px;
  }
  .edit-icon {
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
  }
  .barcode-win {
    flex: 1;
    background-color: #f1f1f1;
    position: relative;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .link {
      position: absolute;
      right: 10px;
      top: 5px;
      color: #666;
    }
    .print-media-wapper {
      display: flex;
    }
    .print-media {
      background-color: #fff;
      overflow: hidden;
      font-family: '黑体';
      img {
        width: 100%;
        height: 100%;
      }
      .print-item {
        line-height: 1;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .print-media-padding {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .active {
      background-color: rgba(0, 110, 255, 0.1);
    }
  }
</style>
